<html>
    <head>
        <style>
            *{
                padding:0;
                margin:0;
            }
            .container{
                /* 确保中间内容可以显示出来，例如：一倍left宽 +一倍right宽 + 适当宽度 */
                min-width: 750px;
            }
            .center{
                float:left;
                background:#DE5E60;
                width:100%;
                /* height:500px; */
            }
            .inner{
                margin:0 300px;
                background:#CCC;
                height:800px;
            }
            .left{
                float:left;
                background:#222;
                width:300px;
                height:200px;
                /* 设置margin-left为负值让left区域回到与center区域同一行，百分比相对于最近的块级或内联块父元素width（非总宽度，不包括padding border margin）的相应百分比的值 */
                margin-left: -100%; 
            }
            .right{
                float:left;
                background:#555;
                width:300px;
                height:200px;
                /* 设置margin-left为负值让right区域回到与center区域同一行 */
                margin-left: -300px; 
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="center">
                <div class="inner">双飞翼布局</div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <script></script>
    </body>
</html>